<template>
    <div class="content">
      <a-form
        :model="form"
        :style="{ width: '600px' }"
        :rules="rules"
        @submit="handleSubmit"
      >
        <a-form-item field="name" label="医院名称">
          <a-input v-model="form.name" placeholder="请输入医院名称" />
        </a-form-item>
        <a-form-item field="institution" label="所属机构">
          <a-input v-model="form.institution" placeholder="请输入所属机构"/>
        </a-form-item>
        <a-form-item field="scale" label="规模">
          <a-select
            v-model="form.scale"
            :options="options"
            :field-names="fieldNames"
            :style="{ width: '320px' }"
            placeholder="选择规模"
          />
        </a-form-item>
        <a-form-item field="phone" label="联系电话">
          <a-input v-model="form.phone" placeholder="请输入电话号码" />
        </a-form-item>
        <a-form-item field="address" label="详细地址">
          <a-input v-model="form.address" placeholder="请输入详细地址" />
        </a-form-item>
        <a-form-item field="synopsis" label="医院简介">
          <a-textarea
                  v-model="form.synopsis"
                  placeholder="请输入"
                  allow-clear
                />
        </a-form-item>
        <a-form-item field="img" label="医院图片">
          <UploadMoudle :file="form.img" :id="`001`" @update="updateAvatar"></UploadMoudle>
        </a-form-item>
        <a-form-item>
          <div class="btn">
            <a-button html-type="submit" type="primary" long>提交</a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </template>
    
    <script setup lang="ts">
  import { reactive, ref, onMounted } from "vue";
  import UploadMoudle from "@/components/upload/UploadMoudle.vue";
  import { inquiriesApi } from "@/api/index";
  import { checkTelephone } from "@/untils/is";
  import { Message } from "@arco-design/web-vue";
  
  let form = ref({
    name: "",
    phone: "",
    institution: "",
    scale: 1,
    id: "",
    img: "",
    address: "",
    synopsis: "",
  });
  const fieldNames = { value: "scale", label: "text" };
  const options = reactive([
    {
      scale: 1,
      text: "小型",
    },
    {
      scale: 0,
      text: "大型",
    },
  ]);
  const rules = {
    name: [
      {
        required: true,
        message: "name is required",
      },
    ],
    phone: [
      {
        required: true,
        message: "phone is required",
      },
      {
        validator: (value, cb) => {
          if (!checkTelephone(value)) {
            cb("格式不正确");
          } else {
            cb();
          }
        },
      },
    ],
    institution: [
      {
        required: true,
        message: "机构是必填项",
      },
    ],
    scale: [
      {
        message: "规模是必选项",
        required: true,
      },
    ],
    address: [
      {
        message: "地址是必选项",
        required: true,
      },
    ],
    synopsis: [
      {
        message: "简介是必选项",
        required: true,
      },
    ],
    img: [
      {
        message: "请选择图片上传",
        required: true,
      },
    ],
  };
  const updateAvatar = (data) => {
    form.value.img = data;
    // console.log(data);
    // console.log(form);
  };
  const handleSubmit =async (data) => {
    console.log(data);
    if (!data.errors) {
      if(data.values.id){
       await inquiriesApi
        .changehospitalinfo(data.values)
        .then((res) => {
          console.log(res);
          Message.success({
            content: res.msg || '修改成功',
            position: "top",
          });
        })
        .catch((err) => {
          console.log(err);
          Message.error({
            content: err.msg || 'error',
            position: "top",
          });
        });
      }else{
       await inquiriesApi
        .createhospitalinfo(data.values)
        .then((res) => {
          console.log(res);
          Message.success({
            content: res.msg || '提交成功',
            position: "top",
          });
        })
        .catch((err) => {
          console.log(err);
          Message.error({
            content: err.msg || 'error',
            position: "top",
          });
        });
      }
      getUserInfo();
    }
  };
  const getUserInfo = () => {
    inquiriesApi
      .gethospitalinfo({})
      .then((res) => {
        console.log(res);
        form.value = res.data?.result[0];
      })
      .catch((err) => {
        console.log(err);
          Message.error({
            content: err.msg || 'error',
            position: "top",
          });
      });
  };
  getUserInfo();
  </script>
    <style lang="less" scoped>
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 50px;
    //   align-items: center;
    //   justify-content: center;
  }
  </style>